<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<%@ include file="/WEB-INF/views/include/header.jsp"%>
<link href="${ctxStatic}/ajax/libs/jquery-layout/jquery.layout-latest.css" rel="stylesheet"/>
<link href="${ctxStatic}/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>

<body class="gray-bg">

	<div class="ui-layout-west">
		<div class="main-content">
			<div class="box box-main">
				<div class="box-header">
					<div class="box-title">
						<i class="fa icon-grid"></i> 栏目管理
					</div>
					<div class="box-tools pull-right">
						<a type="button" class="btn btn-box-tool menuItem" href="#" onclick="categoryTree()" title="组织栏目"><i class="fa fa-edit"></i></a>
						<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
					</div>
				</div>
				<div class="ui-layout-content">
					<div id="tree" class="ztree"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="container-div ui-layout-center">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="user-form">
					<input type="hidden" id="catId" name="catId">
					<input type="hidden" id="parentId" name="parentId">
					<div class="select-list">
						<ul>
							<li>
								登录名称：<input type="text" name="loginName"/>
							</li>
							<li>
								手机号码：<input type="text" name="phonenumber"/>
							</li>
							<li>
								用户状态：<select name="status" >
								<option value="">所有</option>
								<c:forEach items="${fnc:getDictDataByTypeList('sys_normal_disable')}" var="dict">
									<option value="${dict.dictValue}">${dict.dictLabel}</option>
								</c:forEach>
							</select>
							</li>
							<li class="select-time">
								<label>创建时间： </label>
								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
								<span>-</span>
								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
	     </div>

			<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.addTab(100)" >
					<i class="fa fa-plus"></i> 添加
				</a>
				<a class="btn btn-primary btn-edit disabled" onclick="$.operate.editFull()">
					<i class="fa fa-edit"></i> 修改
				</a>
				<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" >
					<i class="fa fa-remove"></i> 删除
				</a>
				<a class="btn btn-info" id="expandAllBtn">
					<i class="fa fa-exchange"></i> 展开/折叠
				</a>

			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-tree-table" data-mobile-responsive="true"></table>
			</div>
		</div>
    </div>
    <%@ include file="/WEB-INF/views/include/footer.jsp"%>
	<script src="${ctxStatic}/ajax/libs/jquery-layout/jquery.layout-latest.js"></script>
	<script src="${ctxStatic}/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>

    <script th:inline="javascript">
        var editFlag =  1;
        var addFlag = 1;
        var removeFlag =  1;
        var prefix = ctx + "cms/category";

        $(function() {
            $('body').layout({ west__size: 185 });
            queryCategoryTree();
        });

        $(function() {
            var options = {
                code: "catId",
                parentCode: "parentId",
                uniqueId: "catId",
                expandAll: false,
                expandFirst: true,
                url: prefix + "/list",
                createUrl: prefix + "/add/{id}",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove/{id}",
                modalName: "栏目管理",
                columns: [{
                    field: 'selectItem',
                    radio: true
                },
                    {
                        field : 'catId',
                        title : '栏目id'
                    },
                    {
                        field : 'catCode',
                        title : '栏目编码'
                    },
                    {
                        field : 'parentId',
                        title : '父级编号'
                    },
                    {
                        field : 'catName',
                        title : '栏目名称'
                    },
                    {
                        field : 'sort',
                        title : '排序'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            if (row.parentId != 0) {
                                var actions = [];
                                actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.editTab(\'' + row.catId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                                actions.push('<a class="btn btn-info  btn-xs ' + addFlag + '" href="#" onclick="$.operate.addTab(\'' + row.catId + '\')"><i class="fa fa-plus">新增</i></a> ');
                                actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.catId + '\')"><i class="fa fa-remove"></i>删除</a>');
                                return actions.join('');
                            } else {
                                return "";
                            }
                        }
                    }]
            };
            $.treeTable.init(options);
        });


        function queryCategoryTree()
        {
            var url = ctx + "cms/category/treeData";
            var options = {
                url: url,
                expandLevel: 2,
                onClick : zOnClick
            };
            $.tree.init(options);

            function zOnClick(event, treeId, treeNode) {
                $("#catId").val(treeNode.id);
                $("#parentId").val(treeNode.pId);
                $.treeTable.search();
            }
        }

        $('#btnExpand').click(function() {
            $._tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        $('#btnCollapse').click(function() {
            $._tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });

        $('#btnRefresh').click(function() {
            queryCategoryTree();
        });

        /*栏目管理*/
        function categoryTree() {
            var url = ctx + "cms/category";
            createMenuItem(url, "栏目管理");
        }


        function remove(id) {
            $.modal.confirm("确定删除该条" + $.table._option.modalName + "信息吗？", function() {
                $.ajax({
                    type : 'post',
                    url: prefix + "/remove/" + id,
                    success : function(result) {
                        if (result.code == web_status.SUCCESS) {
                            $.modal.msgSuccess(result.msg);
                            $.treeTable.refresh();
                        } else {
                            $.modal.msgError(result.msg);
                        }
                    }
                });
            });
        }
    </script>

</body>
</html>